<script setup lang="ts">
import { useIntersectionObserver } from "@vueuse/core";
import { ref } from "vue";

// useIntersectionObserver(目标对象,(arr,targetEelment)=>{})

const imgRef = ref<HTMLImageElement | null>(null);
const { stop } = useIntersectionObserver(imgRef, ([{ isIntersecting }]) => {
  if (isIntersecting) {
    console.log("执行了");

    imgRef.value!.src =
      "https://img2.baidu.com/it/u=3390146002,1576561926&fm=253&fmt=auto&app=120&f=JPEG?w=455&h=256";

    stop();
  }
});
</script>

<template>
  <div style="height: 2000px"></div>
  <!-- 
      不作处理，图片默认是加载的
      需求：当图片进入可视区，才加载图片
      img进入可视区，才给src属性赋值就可以了
      https://img2.baidu.com/it/u=3390146002,1576561926&fm=253&fmt=auto&app=120&f=JPEG?w=455&h=256
      

      最关键点：怎么判断元素进入可视区  
      原生js: IntersectionObserver
      第三方vueuse:  useIntersectionObserver
  
  -->
  <img src="" alt="" ref="imgRef" />
</template>

<style scoped></style>
